<template>
  <div class="login_gd">
    <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#e54847" auto-play="5000"
                height="150">
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt=""/>
      </nut-swiper-item>
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt=""/>
      </nut-swiper-item>
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt=""/>
      </nut-swiper-item>
      <nut-swiper-item>
        <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt=""/>
      </nut-swiper-item>
    </nut-swiper>
  </div>
  <nut-input v-model="username" @change="change" type="text" max-length="20" label="账号"
             placeholder="账户名/手机号/Email"/>
  <nut-input v-model="password" @change="change" type="password" label="密码" placeholder="请输入您的密码"/>

  <div style="position:relative;">
    <nut-row>
      <nut-col :span="24">
        <div class="flex-content">
          <nut-input v-model="verifyImg" @change="change" type="text" max-length="5" label="验证码"
                     placeholder="请输入验证码"/>
        </div>
      </nut-col>
      <nut-col :span="24">
        <div class="flex-content">
          <img class="login_verify" @touchstart="handleToVerifyImg"
               src="/api2/users/verifyImg"
               ref="verifyImg"
               alt="验证码"/>
        </div>
      </nut-col>
    </nut-row>
  </div>
  <div class="login_button">
    <nut-button block :loading="isLoading" type="primary" @click="handleToLogin" color="#e54847">登录</nut-button>
  </div>
  <div class="login_link">
    <router-link to="/mine/register">立即注册</router-link>
    <router-link to="/mine/findPassword">找回密码</router-link>
  </div>
</template>

<script>
import {reactive, ref, getCurrentInstance, toRefs} from 'vue';
import { Toast } from '@nutui/nutui';

export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
      verifyImg: ''
    }
  },
  setup() {
    const state = reactive({
      page: 1,
    });
    let {proxy} = getCurrentInstance();
    let isLoading = ref(false);
    const handleToLogin = () => {
      isLoading.value = true;
      setTimeout(() => {
        isLoading.value = false;
        proxy.$axios.post('/api2/users/login', {
          username: proxy.username,
          password: proxy.password,
          verifyImg: proxy.verifyImg
        }).then((res) => {
          const status = res.data.status;
          const This = proxy;
          if (status === 0) {
            This.verifyImg = '';
            This.username = '';
            This.password = '';
            This.$refs.verifyImg.src = '/api2/users/verifyImg?' + Math.random();
            Toast.success('登录成功');
            This.$router.push('/mine/center')


          } else {
            Toast.fail(res.data.msg);
            This.$refs.verifyImg.src = '/api2/users/verifyImg?' + Math.random();
            This.verifyImg = '';
          }
        });

      }, 618);
    };

    const change = (value, event) => {
      console.log('change: ', value, event);
    };
    const focus = (value, event) => {
      console.log('focus:', value, event);
    };
    const blur = (value, event) => {
      console.log('blur:', value, event);
    };
    const clear = (value) => {
      console.log('clear:', value);
    };

    return {
      state,
      change,
      blur,
      clear,
      focus,
      isLoading,
      handleToLogin,
      proxy,
      ...toRefs(state)
    };
  },
  methods: {
    handleToVerifyImg(ev) {
      ev.target.src = '/api2/users/verifyImg?' + Math.random();
      // console.log(1)
    }
  },
}
</script>

<style scoped>
.login_gd >>> img {
  width: 100%;
  height: 100%;
  /*margin:20px;*/
}

.login_button {
  /*height: 50px;*/
  margin: 10px;
}

.login_link {
  display: flex;
  justify-content: space-between;
}

.login_link a {
  text-decoration: none;
  margin: 0 5px;
  font-size: 12px;
  color: #e54847;
}

.login_verify {
  height: 40px;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  /*width: 150px;*/
  z-index: 999;
}
</style>